<template>
  <div style="padding: 20px;background-color: #f6f6f6;height: 100%">
    <el-button class="back_btn" type="text" icon="el-icon-arrow-left" @click="goIndex">返回首页</el-button>
    <el-row>
      <div style="text-align: center;margin-right: 100px"><H3>{{ club.name }}主页</H3></div>
    </el-row>
    <el-row :gutter="10">
      <el-col :span="5">
        <div class="grid-content"></div>
      </el-col>
      <el-col :span="14">
        <div class="bodyWidth">

          <el-col :span="18">
            <el-row>
              <div style="border-radius: 5px">
                <el-carousel :interval="6000" height="200px">
                  <el-carousel-item v-for="item in newsItems" :key="item.index">
                    <!--    <a :href="form.imgLink">-->
                    <el-image :src="item.url" fit="fill" style="width: 100%;height: 100%"></el-image>
                    <!--    </a>-->
                  </el-carousel-item>
                </el-carousel>
              </div>
            </el-row>
            <el-row>
              <div class="grid-content bg-purple">
                <el-menu :default-active="'/clubHome/clubInformation'" class="el-menu-demo" mode="horizontal"
                         active-text-color="#ef4b3e" background-color="#ffffff" router>
                  <el-menu-item index="/clubHome/clubInformation" @click="showInformation">社团信息</el-menu-item>
                  <el-menu-item index="/clubHome/clubActivity" @click="showActivity">社团活动</el-menu-item>
                  <el-menu-item index="/clubHome/clubNews" @click="showNews">社团资讯</el-menu-item>
                </el-menu>
                <router-view style="padding-bottom: 20px"></router-view>
              </div>
            </el-row>
          </el-col>
          <el-col :span="6">
            <div class="grid-content">
              <el-row :gutter="0">
                <el-col :span="24">
                  <div class="side-content bg-purple">

                    <div class="side-content bg-purple">
                      <div class="sideAction-main" style="padding-top: 5px">
                        <!--                        <span style="margin-left: 15px;font-size: 14px;font-weight: 600;margin-top: 5px">社团成员</span>-->

                        <div>
                          <button class="side-btn" onMouseEnter="this.className = 'side-btn active-btn'"
                                  onMouseLeave="this.className = 'side-btn'" @click="clickItem"><i
                            class="el-icon-user-solid"></i><span> 社团成员</span><span style="margin-left: 50px">人数：{{ member.length }}</span>
                          </button>
                          <el-table :data="member">
                            <el-table-column property="name" label="姓名" width="100"></el-table-column>
                            <el-table-column property="sex" label="性别" width="100"></el-table-column>
                            <!--                          <el-table-column property="grade" label="年级" width="100"></el-table-column>-->
                            <!--                          <el-table-column property="phone" label="电话" width="100"></el-table-column>-->
                          </el-table>
                        </div>
                        <!--                        <div>-->
                        <!--                          <button @click="find" class="side-btn" onMouseEnter="this.className = 'side-btn active-btn'"-->
                        <!--                                  onMouseLeave="this.className = 'side-btn'"><i-->
                        <!--                            class="el-icon-question"></i><span> 社团**</span></button>-->
                        <!--                        </div>-->
                        <!--                        <div>-->
                        <!--                          <button @click="goMyCreateCircle" class="side-btn"-->
                        <!--                                  onMouseEnter="this.className = 'side-btn active-btn'"-->
                        <!--                                  onMouseLeave="this.className = 'side-btn'"><i class="el-icon-circle-check"></i><span> 社团管理</span>-->
                        <!--                          </button>-->
                        <!--                        </div>-->
                      </div>
                    </div>
                  </div>

                </el-col>
              </el-row>
              <!--              <el-row :gutter="0">-->
              <!--&lt;!&ndash;                <el-col :span="24"><div class="side-content bg-purple"></div></el-col>&ndash;&gt;-->
              <!--              </el-row>-->
            </div>
          </el-col>
        </div>
      </el-col>
      <el-col :span="5">
        <div class="grid-content "></div>
      </el-col>
    </el-row>
    <!--    <FindCircle :find-circle-dialog="findCircleDialog" @close-dialog="handleClose"></FindCircle>-->
  </div>
</template>

<script>
// import FindCircle from "./findCircle/FindCircle";
import {getClub} from "@/api/club";
import {getPageActivity} from "../../../../api/activity";
import {getClubMember} from "../../../../api/club";

export default {
  name: "ClubHome",
  data() {
    return {
      activeIndex: '',
      findCircleDialog: false,
      clubId: null,
      club: [],
      member: [],
      newsItems: [
        // {url: require("@/assets/1.jpg")},
        {url: require("@/assets/2.jpg")},
        {url: require("@/assets/3.jpg")},
        {url: require("@/assets/4.jpg")}
      ],
    }
  },
  created() {
    this.init();
    this.activeIndex = this.$route.path;
    // this.getUserId();
    // this.getNews();
  },
  methods: {
    /*初始化信息*/
    init() {
      this.clubId = this.$route.params.id;
      console.log("社团编号：", this.clubId);
      this.getClub();
      this.showInformation();
      this.getClubMember();
    },
    /*获取活动*/
    showActivity() {
      this.$router.push({
        path: `/clubHome/clubActivity`,
        name: 'clubActivity',
        params: {
          id: this.clubId
        }
      })
    },
    /*获取资讯*/
    showNews() {
      this.$router.push({
        path: `/clubHome/clubNews`,
        name: 'clubNews',
        params: {
          id: this.clubId
        }
      })
    },
    /*获取社团基本信息*/
    showInformation() {
      this.$router.push({
        path: `/clubHome/clubInformation`,
        name: 'clubInformation',
        params: {
          id: this.clubId
        }
      })
    },
    /*返回首页*/
    goIndex() {
      //点击跳转至上次浏览页面
      // this.$router.go(-1)
      //指定跳转地址
      // this.$router.push('/managerHome/clubHome','')

      // this.$router.push(`/managerHome/clubHome/${this.clubRecord.id}`)
      this.$router.push('/managerHome')

    },
    getClub() {
      getClub({
        id: this.clubId
      }).then(res => {
        this.club = res.data;
        console.log("社团信息：", this.club)
      })
    },
    getActivity() {
      getPageActivity({
        status: 1,
        // currentPage: this.page.current,
        clubId: this.clubId,
        // activityName: this.activityName,
      }).then(res => {
        this.page = res.data;
      })
    },
    /*获取社团成员*/
    getClubMember() {
      getClubMember({
        clubId: this.clubId,
      }).then(res => {
        console.log(res)
        if (res.code == 200) {
          // this.$message({
          //   type: 'success',
          //   message: res.message
          // });
          // this.dialogVisible = true
          this.member = res.data
        }
      })
    },
    clickItem() {

    },
    /*以下旧代码*/
    getNews() {
      this.$http.get('/news/getItems', {
        params: {
          parentId: 2,
        }
      }).then(res => {
        this.newsItems = res.data.data;
        console.log(this.newsItems)
      })
    },
    createCircle() {
      this.$router.push('/createCircle')
    },
    handleClose() {
      this.findCircleDialog = false;
    },
    find() {
      this.findCircleDialog = true;
    },
    goMyCreateCircle() {
      this.$router.push({path: `/user/${this.userId}/myCreateCircle`});
      this.reload();
    },
    getUserId() {
      this.$http.get('/user/getUserId').then(res => {
        this.userId = res.data.data;
      })
    },
  },
  components: {
    // FindCircle
  },

}
</script>

<style Lang="less" scoped>
.back_btn {
  font-size: 15px;
}

.el-row {
  margin-bottom: 20px;

}

.el-col {
  border-radius: 4px;
}

.bg-purple {
  background: #ffffff;
}

.bodyWidth {
  width: 1100px;
  display: flex;
  justify-content: space-between;
}

.sideAction {
  display: flex;
  justify-content: space-between;
  padding: 15px;
}

.side-content {
  border-radius: 4px;
  min-height: 150px;
}

.grid-content {
  border-radius: 4px;
  min-height: 100px;
  height: 100%;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
}

.test {
  background-color: #c69393;
}

.changeAddressBtn {
  margin-left: 15px;
  font-size: 13px;
  cursor: pointer;
}

.changeAddressBtnActive {
  color: #8c939d;
}


.sideAction-main {
  padding-top: 5px;
  padding-bottom: 10px;
  /*display: block;*/
  /*text-align: center;*/
}

.side-btn {
  /*width: 140px;*/

  width: 100%;
  height: 34px;
  line-height: 10px;
  border: none;
  text-align: left;
  background-color: #ffffff;
  cursor: pointer;
  padding-left: 13px;
  border-radius: 5px;
  outline: none;
}

.active-btn {
  background-color: #ef4b3e;
  color: #ffffff;
}
</style>
